<template>
  <el-main class="basic-config">
    <template v-if="state.data">
      <div class="basic-box">
        <div class="basic-box-title">基础信息</div>
        <div class="basic-box-item sa-flex">
          <div class="basic-box-item-label">联系人</div>
          <div class="basic-box-item-text">{{state.data.contact_name || '空'}}</div>
        </div>
        <div class="basic-box-item sa-flex">
          <div class="basic-box-item-label">店铺类型</div>
          <div class="basic-box-item-text">{{state.data.category_text || '空'}}</div>
        </div>
        <div class="basic-box-item sa-flex">
          <div class="basic-box-item-label">联系电话</div>
          <div class="basic-box-item-text">{{state.data.mobile}}</div>
        </div>
      </div>
      <div class="basic-box sa-m-t-20">
        <div class="basic-box-title">主体信息</div>
        <div class="basic-box-item sa-flex">
          <div class="basic-box-item-label">主体类型</div>
          <div class="basic-box-item-text">
            <span v-if="state.data.entity_type === 'individual'">个人</span>
            <span v-else>企业</span>
          </div>
        </div>
        <div class="basic-box-item sa-flex">
          <div class="basic-box-item-label">主体名称</div>
          <div class="basic-box-item-text">{{state.data.entity_name || '空'}}</div>
        </div>
        <div class="basic-box-item sa-flex sa-col-top">
          <div class="basic-box-item-label">营业执照</div>
          <el-image class="basic-box-item-image" :src="checkUrl(state.data.business_license)" :fit="'cover'" />
        </div>
      </div>
      <div class="basic-box sa-m-t-20">
        <div class="basic-box-title">法人信息</div>
        <div class="basic-box-item sa-flex">
          <div class="basic-box-item-label">证件类型</div>
          <div class="basic-box-item-text">
            <span>居民身份证</span>
          </div>
        </div>
        <div class="basic-box-item sa-flex">
          <div class="basic-box-item-label">法人名称</div>
          <div class="basic-box-item-text">{{state.data.legal_person_name || '空'}}</div>
        </div>
        <div class="basic-box-item sa-flex sa-col-top">
          <div class="basic-box-item-label">证件证明</div>
          <el-image class="basic-box-item-image" :src="state.data.legal_id_images && checkUrl(state.data.legal_id_images.split(',')[0])" :fit="'cover'" />
          <el-image class="basic-box-item-image" :src="state.data.legal_id_images && checkUrl(state.data.legal_id_images.split(',')[1])" :fit="'cover'" />
        </div>
      </div>
    </template>
  </el-main>
</template>

<script setup>
  import { reactive, onMounted } from 'vue';
  import {api} from '../info.service'
  import { checkUrl } from '@/sheep/utils/checkUrlSuffix';

  const state = reactive({
    data: null,
  });

  onMounted(() => {
    getData();
  });

  const getData = async () => {
    const {error,data} = await api.basic.info()
    if (error === 0) {
      state.data = data
    }
  };
</script>

<style lang="scss" scoped>

  .basic-box {
    .basic-box-title {
      width: max-content;
      position: relative;
      font-family: 'PingFangSC-Regular, sans-serif';
      font-size: 14px;
      color: #3D3D3D;
      z-index: 0;
    }

    .basic-box-title::after {
      pointer-events: none;
      content: "";
      position: absolute;
      height: 8px;
      background: var(--t-bg-active);
      bottom: 0;
      right: 0;
      left: 0;
      z-index: -1;
    }

    .basic-box-item {
      padding-left: 40px;
      margin-top: 20px;

      .basic-box-item-label {
        min-width: 100px;
        font-family: 'PingFangSC-Regular, sans-serif';
        font-size: 14px;
        color: #3D3D3D;
        margin-right: 20px;
      }

      .basic-box-item-text {
        font-family: 'PingFangSC-Regular, sans-serif';
        font-size: 14px;
        color: #3D3D3D;
      }

      .basic-box-item-image {
        width: 225px;
        height: 150px;
        margin-right: 40px;
      }
    }
  }
</style>
